<script setup lang="ts">
import { ref, watch } from 'vue'
// 定义数据
const A = ref([{ name: "A1", wrap: true, index: 0 }, { name: "A2", wrap: true, index: 1 }, { name: "A3", wrap: false, index: 2 }, { name: "A4", wrap: true, index: 3 }, { name: "A5", wrap: true, index: 4 }])
const B = ref([{ name: "B1", wrap: true, index: 0 }, { name: "B2", wrap: false, index: 1 }, { name: "B3", wrap: true, index: 2 }, { name: "B4", wrap: true, index: 3 }, { name: "B5", wrap: true, index: 4 }])
const C = ref([{ name: "C1", wrap: true, index: 0 }, { name: "C2", wrap: true, index: 1 }, { name: "C3", wrap: true, index: 2 }, { name: "C4", wrap: false, index: 3 }, { name: "C5", wrap: true, index: 4 }])
const D = ref([{ name: "D1", wrap: false, index: 0 }, { name: "D2", wrap: true, index: 1 }, { name: "D3", wrap: true, index: 2 }, { name: "D4", wrap: true, index: 3 }, { name: "D5", wrap: true, index: 4 }])
const E = ref([{ name: "E1", wrap: true, index: 0 }, { name: "E2", wrap: false, index: 1 }, { name: "E3", wrap: true, index: 2 }, { name: "E4", wrap: true, index: 3 }, { name: "E5", wrap: true, index: 4 }])
const F = ref([A, B, C, D, E])
// 定义打印的变量
const log: any = ref([])
watch(A, (newValue, oldValue) => {
  console.log(oldValue, newValue); // 可以在这里添加额外的逻辑处理，例如条件渲染等。
});
// 创建方法
const method = (number: number) => {
  // 清空缓存
  log.value = []
  // 方法1的执行
  if (number === 1) {
    for (let index = 0; index < F.value.length; index++) {
      for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
        log.value.push(F.value[index].value[indexSon].name)
      }
    }
    // 方法2的执行
  } else if (number === 2) {
    for (let index = 0; index < F.value.length; index++) {
      if (index % 2 === 0) {
        for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
          log.value.push(F.value[index].value[indexSon].name)
        }
      } else {
        const Fs = [...F.value[index].value].reverse()
        for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
          log.value.push(Fs[indexSon].name)
        }
      }
    }
    // 方法3的执行
  } else if (number === 3) {
    for (let index = 0; index < F.value.length; index++) {
      for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
        log.value.push(F.value[indexSon].value[index].name)
      }
    }
    // 方法4的执行
  } else if (number === 4) {
    for (let index = 0; index < F.value.length; index++) {
      if (index % 2 === 0) {
        for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
          log.value.push(F.value[indexSon].value[index].name)
        }
      } else {
        let Fs = []
        for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
          Fs.push(F.value[indexSon].value[index].name)
        }
        Fs = [...Fs.reverse()]
        for (let index = 0; index < Fs.length; index++) {
          log.value.push(Fs[index])
        }
      }
    }
    // 方法5的执行
  } else if (number === 5) {
    const breakpoint: number = 3
    for (let index = 0; index < F.value.length; index++) {
      for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
        if (indexSon === breakpoint) {
          break;
        } else {
          log.value.push(F.value[index].value[indexSon].name)
        }
      }
    }
    for (let index = 0; index < F.value.length; index++) {
      for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
        if (indexSon >= breakpoint) {
          log.value.push(F.value[index].value[indexSon].name)
        }
      }
    }
    // 方法6的执行
  } else if (number === 6) {
    const breakpoint: number = 3
    for (let index = 0; index < F.value.length; index++) {
      for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
        if (indexSon === breakpoint) {
          break;
        } else {
          log.value.push(F.value[index].value[indexSon].name)
        }
      }
    }


    // 使用递归函数定义多维数组
    function buildMultiArray(dimensions: any, value: any) {
      if (dimensions.length === 0) {
        return value;
      } else {
        let array = Array(dimensions[0]);
        for (let i = 0; i < dimensions[0]; i++) {
          array[i] = buildMultiArray(dimensions.slice(1), value);
        }
        return array;
      }
    }

    // 定义二维数组
    let Fs = buildMultiArray([F.value.length, 0], null);
    // console.log(Fs);
    // let Fs:any = null
    for (let index = 0; index < F.value.length; index++) {
      for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
        if (indexSon >= breakpoint) {
          Fs[index].push(F.value[index].value[indexSon].name)
        }
      }
      // console.log(Fs);
    }
    Fs = [...Fs.reverse()]
    // console.log(Fs);
    for (let index = 0; index < Fs.length; index++) {
      for (let indexSon = 0; indexSon < Fs[index].length; indexSon++) {
        // const element = array[indexSon];
        log.value.push(Fs[index][indexSon])
      }
    }
    // 方法7的执行
  } else if (number === 7) {
    let breakpoint: any = []
    for (let index = 0; index < F.value.length; index++) {
      for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
        if (F.value[index].value[indexSon].wrap == false) {
          // console.log(...F.value[index].value[indexSon].name[1]);
          breakpoint.push(...F.value[index].value[indexSon].name[1])
        }
      }
    }
    for (let index = 0; index < F.value.length; index++) {
      // console.log(breakpoint[index]);
      // console.log(F.value[index].value[breakpoint[index]]);
      for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
        if (indexSon == breakpoint[index]) {
          break;
        } else {
          log.value.push(F.value[index].value[indexSon].name)
        }
      }

    }
    for (let index = 0; index < F.value.length; index++) {
      for (let indexSon = 0; indexSon < F.value[index].value.length; indexSon++) {
        // console.log(breakpoint[index]);
        // console.log(indexSon);
        if (indexSon >= breakpoint[index]) {
          log.value.push(F.value[index].value[indexSon].name)
        }
      }
    }
  }
}
const button = (item: object, index: number, letter: string) => {
  if (letter == "A") {
    item
    for (let num = 0; num < A.value.length; num++) {
      if (A.value[num].index == index) {
        // console.log("a");
        A.value[num].wrap = false
      } else {
        A.value[num].wrap = true
      }
    }
  }
  else if (letter == "B") {
    for (let num = 0; num < B.value.length; num++) {
      if (B.value[num].index == index) {
        B.value[num].wrap = false
      } else {
        B.value[num].wrap = true
      }
    }
  }
  else if (letter == "C") {
    for (let num = 0; num < C.value.length; num++) {
      if (C.value[num].index == index) {
        C.value[num].wrap = false
      } else {
        C.value[num].wrap = true
      }
    }
  }
  else if (letter == "D") {
    for (let num = 0; num < D.value.length; num++) {
      if (D.value[num].index == index) {
        D.value[num].wrap = false
      } else {
        D.value[num].wrap = true
      }
    }
  }
  else if (letter == "E") {
    for (let num = 0; num < E.value.length; num++) {
      if (E.value[num].index == index) {
        E.value[num].wrap = false
      } else {
        E.value[num].wrap = true
      }
    }
  }
}
</script>

<template>
  <H1>点击下方方块进行断点</H1>
  <div class="box">
    <div>
      <div v-for="item, index in A" @click="button(item, index, 'A')" :class="A[index].wrap?'green':'red'">{{ item.name }}----{{ item.wrap }}</div>
    </div>
    <div>
      <div v-for="item,index in B" @click="button(item, index, 'B')" :class="B[index].wrap?'green':'red'">{{ item.name }}----{{ item.wrap }}</div>
    </div>
    <div>
      <div v-for="item,index in C" @click="button(item, index, 'C')" :class="C[index].wrap?'green':'red'">{{ item.name }}----{{ item.wrap }}</div>
    </div>
    <div>
      <div v-for="item,index in D" @click="button(item, index, 'D')" :class="D[index].wrap?'green':'red'">{{ item.name }}----{{ item.wrap }}</div>
    </div>
    <div>
      <div v-for="item,index in E" @click="button(item, index, 'E')" :class="E[index].wrap?'green':'red'">{{ item.name }}----{{ item.wrap }}</div>
    </div>
  </div>
  <br />
  <br />
  <br />
  <br />
  <h1>方法测试</h1>
  <button @click="method(1)">方法1</button>
  <button @click="method(2)">方法2</button>
  <button @click="method(3)">方法3</button>
  <button @click="method(4)">方法4</button>
  <button @click="method(5)">方法5</button>
  <button @click="method(6)">方法6</button>
  <button @click="method(7)">方法7</button>
  <br />
  <br />
  <br />
  <br />
  <h1>输出结果</h1>
  <h2>{{ log }}</h2>
</template>

<style scoped lang="scss">
.box {

  // width: 100%;
  // display: flex;
  >div {
    width: 100%;
    display: flex;
    justify-content: space-between;

    >div {
      line-height: 50px;
      width: 20%;
      // text-align: center;
    }
  }
}

.green {
  background-color: #0f0;
}

.red {
  background-color: red;
}
</style>
